/** @jsx jsx */;
import {keyframes,ClassNames, css, jsx } from '@emotion/react'
import classNames from 'classnames';
import {useFloating} from '@floating-ui/react-dom-interactions';
import React, { useState } from 'react';
const css_global=css`
  #tooltip {
        background: #222;
        color: white;
        font-weight: bold;
        padding: 5px;
        border-radius: 4px;
        font-size: 90%;
        pointer-events: none;
}`
export default function App() {
  const [open, setOpen] = useState(true);
  const {x, y, reference, floating, strategy} = useFloating({
    open,
    onOpenChange: setOpen,
  });
 
  return (
    <div css={css_global}>
      <button id="button" ref={reference}>Button</button>
      {open && (
        <div
          id="tooltip"
          ref={floating}
          style={{
            position: strategy,
            top: y ?? '',
            left: x ?? '',
          }}
        >
          Tooltip
        </div>
      )}
    </div>
  );
}